import React, { Component } from 'react'
import { Card } from 'antd'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import echarts from 'echarts'
import './bars.less'
/**
 * 柱状图
 */
export default class index extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('charts-bar'))
    // 绘制图表
    myChart.setOption({
      title: {
        text: '',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  }
  render() {
    return (
      <Card title="柱状统计图" bordered={false} style={{ height: '100%' }}>
        <div
          id="charts-bar"
          style={{
            width: '90%',
            height: 650,
            top: '50%',
            transform: 'translate( 0, -50%)',
          }}
        ></div>
      </Card>
    )
  }
}
